<template>
  <el-dialog v-model="visible" title="支付详情" width="50%">
    <el-descriptions :column="1" border>
      <el-descriptions-item label="ID">{{ detail?.id }}</el-descriptions-item>
      <el-descriptions-item label="用户">{{ detail?.user?.username }}</el-descriptions-item>
      <el-descriptions-item label="订单号">{{ detail?.out_trade_no }}</el-descriptions-item>
      <el-descriptions-item label="交易号">{{ detail?.transaction_id }}</el-descriptions-item>
      <el-descriptions-item label="状态">
        <el-tag :type="statusTagType(detail!.status)">
          {{ statusText(detail!.status) }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="应付金额">{{ detail?.amount_payable }}</el-descriptions-item>
      <el-descriptions-item label="实付金额">{{ detail?.amount }}</el-descriptions-item>
      <el-descriptions-item label="退款金额">{{ detail?.refund_amount }}</el-descriptions-item>
      <el-descriptions-item label="创建时间">{{ detail?.created_at }}</el-descriptions-item>
      <el-descriptions-item label="支付时间">
        {{ detail?.success_time || "未支付" }}
      </el-descriptions-item>
      <el-descriptions-item label="描述">{{ detail?.description }}</el-descriptions-item>
    </el-descriptions>
  </el-dialog>
</template>

<script lang="ts" setup>
import { computed } from "vue";
import { type PaymentType } from "@/api/payment/payment";

const props = defineProps<{
  modelValue: boolean;
  detail: PaymentType | null;
}>();

const emit = defineEmits(["update:modelValue"]);

const visible = computed({
  get: () => props.modelValue,
  set: (val) => emit("update:modelValue", val),
});

function statusText(status: string): any {
  const map: Record<string, string> = {
    no_pay: "未支付",
    processing: "支付中",
    paid: "已支付",
    refunding: "退款中",
    part_refund: "部分退款",
    full_refund: "全额退款",
    canceled: "已取消",
    error: "支付失败",
  };
  return map[status] || status;
}

function statusTagType(status: string): any {
  const map: Record<string, string> = {
    no_pay: "info",
    processing: "warning",
    paid: "success",
    refunding: "",
    part_refund: "",
    full_refund: "info",
    canceled: "danger",
    error: "danger",
  };
  return map[status] || "";
}
</script>
